import React, { Component,useState,useEffect } from 'react'
//使用antd的24个横向布局
import '../static/style/components/header.css'
import {Row,Col,Menu} from 'antd'
import {Route,withRouter,Link,Redirect} from 'react-router-dom'
import axios from 'axios'
import servicePages from '../config/apiUrl'
import {
    HomeOutlined,
    SmileOutlined,
    YoutubeOutlined,
  } from '@ant-design/icons';
import { isRegularExpressionLiteral } from 'typescript'

 function Header(){
        // const [navArray,setNavArray] = useState([])
        // useEffect(() => {
        //     const fetchDate = async ()=>{
        //         const result = await axios(servicePages.getTypeInfo).then(
        //             (res)=>{
        //                 return res.data.data
        //             }
        //         ) 
        //         setNavArray(result)
        //     }
        //     fetchDate()
        // }, [])
        // const handleClick=(e)=>{
        //     if(e.key==0){
        //         Router.push("/main")
        //     }else{
        //         Router.push("/list?id="+e.key)
        //     }
        // }
        return (
            <div className='header'>
                <Row type= "flex" justify="center">
                    {/* 下面这些不知道啥玩意的就是适配屏幕 */}
                    <Col xs={24} sm={24} md={10} lg={15} xl={12}>
                        <Link to='/main'>
                            <span className="header-logo">梨苏橙</span>
                        </Link>
                        
                        <span className="header-txt">这是一个前端菜鸡</span>
                    </Col>
                    <Col xs={0} sm={0} md={14} lg={8} xl={6}>
                        <Menu mode = "horizontal">
                            <Menu.Item key= "home" className='main-content'>
                                <Link to='/main'><HomeOutlined />首页</Link>
                            </Menu.Item>
                            <Menu.Item key= "video" className='main-content'>
                                <Link to={{pathname:"/list/"+1}}><YoutubeOutlined />教程</Link>
                            </Menu.Item>
                            <Menu.Item key= "life" className='main-content'>
                                <Link to={{pathname:"/list/"+2}}><SmileOutlined />生活</Link>
                            </Menu.Item>
                        </Menu>
                    </Col>
                </Row>
            </div>
        )
}
export default withRouter(Header)